<template>
  <div class="news">
    <ul class="tab-hd clear">
      <li
        v-for="button in buttons"
        :key="button.index"
        :class="{'on':currentIndex===button.index}"
        @mouseover="doTheAnimate(button.index)"
      >
        <a href="javascript:void(0)">{{button.name}}</a>
      </li>
    </ul>
    <a href="javascript:void(0)" class="dian">...</a>
    <div class="news-con">
      <div class="news-slide-list" ref="container">
        <ul class="news-list" v-for="(item,index) in list1" :key="index">
          <li v-for="(news,index) in item.news" :key="index" :class="{'li-news':newsIndex===index}">
            <a href="javascript:void(0)">{{news.list}}</a>
            <em>{{news.time}}</em>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    buttons: [{ name: '热门', index: 0 }, { name: '新闻', index: 1 }, { name: '公告', index: 2 }, { name: '活动', index: 3 }, { name: '赛事', index: 4 }],
    currentIndex: 0,
    newsIndex: 0,
    list1: []
  }),
  created () {
    this.getlist1()
  },
  methods: {
    move () {
      let left = `-${this.currentIndex * 100}%`
      this.$refs.container.style.left = left
    },
    doTheAnimate (arg) {
      this.currentIndex = arg
      this.move()
    },
    async getlist1 () {
      const { data, status } = await this.$axios('/getlist1')
      if (status !== 200) alert('数据请求不到')
      this.list1 = data
      console.log(this.list1)
    }
  }
}
</script>
<style lang="less" scoped>
.iconfont {
  font-family: 'iconfont';
  font-size: 16px;
  font-style: normal;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
* {
  margin: 0;
  padding: 0;
}
.clear:after {
  clear: both;
  content: ' ';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.news {
  position: relative;
  width: 325px;
  overflow: hidden;
  .dian {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 52px;
    display: block;
    color: #b8b9c5;
    text-align: center;
    font-size: 14px;
  }
  .tab-hd {
    border-bottom: 1px solid #000;
    position: relative;
    overflow: hidden;
    li {
      float: left;
      width: 52px;
      font-size: 14px;
      text-align: center;
      line-height: 45px;
      height: 45px;
      padding-bottom: 3px;
      transition: all 0.3s linear;
      a {
        display: inline-block;
        color: #b8b9c5;
      }
    }
    .on {
      padding: 0;
      border-bottom: 3px solid #f3c258;
      a {
        color: #f3c258;
      }
    }
  }
}
.news-con {
  position: relative;
  z-index: 1000;
  .news-slide-list {
    position: relative;
    width: 500%;
    transition: left 0.3s linear;
    height: 269px;
    .news-list {
      position: relative;
      width: 20%;
      float: left;
      display: block;
      li {
        margin-bottom: 11px;
        overflow: hidden;
        a {
          width: 270px;
          color: #b8b9c5;
          font-size: 14px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          float: left;
        }
        a:hover {
          text-decoration: underline;
        }
        em {
          color: #999;
          font-size: 12px;
          float: right;
          font-style: normal;
        }
      }
      .li-news {
        width: 294px;
        height: 36px;
        line-height: 36px;
        padding: 0 15px;
        margin-top: 18px;
        text-align: center;
        font-size: 28px;
        color: #333333;
        background: #414046;
        a {
          color: #f3c258;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
